<template>
	<div class="cardmsg" :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom></HeadCustom>
		<u-collapse @change="change" @close="close" @open="open" :value="[0, 1, 2, 3]">
			<u-collapse-item v-for="(item, index) in cardMsg" :key="index" :title="item.title" :name="index">
				<view class="collapse-box">
					<view
						class="fboxRow grxx_box"
						:class="{ nobottom: _item.islast }"
						v-for="(_item, _index) in item.data"
						:key="_index"
						:style="{ height: _item.id == 'imagePhoto' ? '180rpx' : '100rpx' }"
						 @click="editMine(_item)"
					>
						<text style="width: 120rpx;" v-if="_item.type">{{ _item.type }}</text>

						<template v-if="_item.id == 'imagePhoto'">
							<view class="flex1"><image class="img_min" :src="grxxData.imagePhoto" mode="aspectFill"></image></view>
						</template>
						<!-- 个性标签单独处理 -->
						<template v-else-if="_item.id == 'listPortray'">
							<view class="flex1" :class="{ 'c-6B707C': !grxxData[_item.id], ellipsis1: true }">
								<text v-if="grxxData[_item.id]">{{ grxxData[_item.id].length != 0 ? grxxData[_item.id].map(x => x.portrayName).toString() : '' }}</text>
								<text v-else>请输入</text>
							</view>
						<i class="bwfont bw-arrow-right img_right"></i>
						</template>
						<!-- 语音设置单独独立 -->
						<template v-else-if="_item.id == 'intelligenceVoiceUrl'">
							<view class="flex1" :class="{ 'c-6B707C': !grxxData[_item.id] }">
								{{ grxxData['voiceType'] == '1' ? '智能语音' : grxxData['voiceType'] == '2' ? '自定义语音介绍' : '请设置' }}
							</view>
						<i class="bwfont bw-arrow-right img_right"></i>
						</template>
						<!-- 期望结识单独处理 -->
						<template v-else-if="_item.id == 'expectMeetList'">
							<view class="flex1" :class="{ 'c-6B707C': !grxxData[_item.id], ellipsis2: true }">
								<text v-if="grxxData[_item.id]">{{ grxxData[_item.id].length != 0 ? grxxData[_item.id].toString() : '请设置' }}</text>
								<text v-else>请设置</text>
							</view>
						<i class="bwfont bw-arrow-right img_right"></i>
						</template>
						<!-- 所在城市单独处理 -->
						<template v-else-if="_item.id == 'city'">
							<view class="flex1" :class="{ 'c-6B707C': !grxxData['areaProvinceName'] }" v-if="grxxData['areaProvinceName']">
								{{ grxxData['areaProvinceName'] || '' }} {{ grxxData['areaCityName'] || '' }} {{ grxxData['areaDistrictName']  || ''}}
							</view>
							<view class="flex1" v-else>请选择</view>
						<i class="bwfont bw-arrow-right img_right"></i>
						</template>
						<!-- 我的家乡单独处理 -->
						<template v-else-if="_item.id == 'hometown'">
							<view class="flex1" :class="{ 'c-6B707C': !grxxData['areaHomeProvinceName'] }" v-if="grxxData['areaHomeProvinceName']">
								{{ grxxData['areaHomeProvinceName'] || '' }} {{ grxxData['areaHomeCityName'] || '' }} {{ grxxData['areaHomeDistrictName'] || '' }}
							</view>
							<view class="flex1" v-else>请选择</view>
						<i class="bwfont bw-arrow-right img_right"></i>
						</template>

						<template v-else>
							<view class="flex1" :class="{ 'c-6B707C': !grxxData[_item.id], 'single': !_item.type,  ellipsis2: _item.ellipsis2, ellipsis1: _item.ellipsis1 }">
								<text v-if="grxxData[_item.id]">{{grxxData[_item.id]}}</text>
								<text v-else>{{ _item.id =='styleName' || _item.id =='imagePhoto' ? '请选择' : '请输入' }}</text>
							</view>
						<i class="bwfont bw-arrow-right img_right"></i>
						</template>
					</view>
				</view>
			</u-collapse-item>
		</u-collapse>
		<view class="tips_box fboxRow Ycenter Xcenter">温馨提示：更多个人信息请下载本无名片APP</view>
		<BottomBtn title="预览我的名片" @btnClick="clickBtn"></BottomBtn>
		<u-action-sheet
			cancelText="取消"
			@select="selectSheet"
			@close="closeSheet"
			:closeOnClickOverlay="true"
			:round="10"
			:closeOnClickAction="true"
			:actions="sexList"
			:show="show"
		></u-action-sheet>
		<u-action-sheet
			cancelText="取消"
			@select="slectImg"
			@close="closeSheet"
			:closeOnClickOverlay="true"
			:round="10"
			:closeOnClickAction="true"
			:actions="imgList"
			:show="imgShow"
		></u-action-sheet>
	</div>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { fileUploadAnon } from '@/api/index.js';
import { getCardDetail, putCardUpdate } from '@/api/card.js';
import { getSetUser } from '@/api/mine.js';
export default {
	props: {},
	components: { BottomBtn },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			cardMsg: [
				{
					title: '名片样式',
					data: [{ type: '', id: 'styleName', url: '/mine/edit/style', islast: true, ellipsis1: true }]
				},
				{
					title: '名片信息',
					data: [
						{ type: '头像', id: 'imagePhoto', url: '' },
						{ type: '姓名', id: 'realName', url: '/mine/edit/groupText?type=realName', isMemberAuth: false },
						// { type: '性别', id: 'genderName', isMemberAuth: false },
						{ type: '手机', id: 'mobile', url: '/mine/edit/phoneNum' },
						{ type: '邮箱', id: 'email', url: '/mine/edit/phoneNum' },
						{ type: '单位', id: 'companyName', url: '/mine/edit/groupText?type=companyName' },
						{ type: '职位', id: 'positionName', url: '/mine/edit/groupText?type=positionName' },
						{ type: '地址', id: 'addressInfo', islast: true, url: '/mine/edit/phoneNum', ellipsis2: true }
					]
				},
				{
					title: '信息发布',
					data: [
						{ type: '我提供', id: 'canProvide', url: '/mine/edit/groupText?type=canProvide' },
						{ type: '我需要', id: 'need', url: '/mine/edit/groupText?type=need', islast: true },
						// { type: '我提供', id: 'canProvide', url: '/mine/edit/provide' },
						// { type: '我需要', id: 'need', url: '/mine/edit/need', islast: true },
					]
				},
				{
					title: '个性刻画',
					data: [
						{ type: '提要词', id: 'memberSynopsis', url: '/mine/edit/groupText?type=memberSynopsis' },
						{ type: '个性标签', id: 'listPortray', url: '/mine/edit/label' },
						{ type: '个人简介', id: 'memberProfile', url: '/mine/edit/groupText?type=memberProfile', ellipsis1: true },
						{ type: '语音设置', id: 'intelligenceVoiceUrl', islast: true, url: '/mine/edit/audio' }
					]
				},
				{
					title: '其他信息',
					data: [
						{
							type: '性别',
							id: 'genderName',
							isMemberAuth: false
						},
						{
							type: '生日',
							id: 'birthday',
							url: '/mine/edit/birthday',
							isMemberAuth: false
						},
						{
							type: '身份',
							id: 'status',
							url: '/mine/edit/status'
						},
						{
							type: '行业',
							id: 'industry',
							url: '/mine/edit/industry'
						},
						{
							type: '个性签名',
							id: 'memberSign',
							url: '/mine/edit/sign',
							ellipsis1: true
						},
						{
							type: '所在城市',
							id: 'city',
							url: '/mine/edit/cityPicker?type=city'
						},
						{
							type: '我的家乡',
							id: 'hometown',
							url: '/mine/edit/cityPicker?type=hometown'
						},
						{
							type: '毕业院校',
							id: 'college',
							url: '/mine/edit/school'
						},
						{
							type: '期望结识',
							id: 'expectMeetList',
							url: '/mine/edit/expect',
							islast: true
						}
					]
				}
			],
			show: false,
			sexList: [
				{
					name: '男',
					gender: '1'
				},
				{
					name: '女',
					gender: '2'
				}
			],
			imgShow: false,
			imgList: [
				{
					name: '拍照',
					value: 0
				},
				{
					name: '从相册选择',
					value: 1
				}
			],
			grxxData: {
				realName: '',
				genderName: '',
				mobile: '',
				email: '',
				addressInfo: '',
				companyName: '',
				positionName: ''
			}
		};
	},
	onShow() {
		const { bw_params } = getApp().getBWData(['bw_params']);
		if (bw_params.access_token) {
			this.getInit();
		} else {
			console.log(11);
		}
		uni.setNavigationBarTitle({
			title: `名片信息`
		});
	},
	methods: {
		open(e) {
			// console.log('open', e)
		},
		close(e) {
			// console.log('close', e)
		},
		change(e) {
			// console.log('change', e)
		},
		getInit() {
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});

			getCardDetail()
				.then(res => {
					this.grxxData = res.data;
					this.getSetUserInfo();
					if (this.grxxData.gender) {
						this.grxxData.genderName = this.grxxData.gender == '1' ? '男' : '女';
					}
					// 判断是否实名认证
					this.cardMsg[1].data[1].isMemberAuth = this.grxxData.isMemberAuth;
					this.cardMsg[4].data[0].isMemberAuth = this.grxxData.isMemberAuth;
					this.cardMsg[4].data[1].isMemberAuth = this.grxxData.isMemberAuth;
					if (this.grxxData.organisationId) {
						this.cardMsg[0].data[0].id = 'organisation';
						this.grxxData.organisation = '商务名片 - '+res.data.organisation
					} else {
						this.cardMsg[0].data[0].id = 'styleName';
						this.grxxData.styleName = '个人名片 - '+res.data.styleName
					
					}
					getApp().globalData.cardTemp = res.data;
					uni.setStorageSync('bw_card_temp', JSON.stringify(res.data));
				})
				.finally(() => {
					uni.hideLoading();
				});
		},
		// 获取个人信息
		getSetUserInfo() {
			getSetUser().then(res => {
				this.grxxData = { ...this.grxxData, ...res.data };
			});
		},
		// 预览我的名片
		clickBtn() {
			this.$pageTo('/CardDetail?id=' + this.grxxData.cardId+'&type=view');
		},
		// 编辑信息
		editMine(data) {
			if(data.id == 'imagePhoto'){
				this.imgOpen()
			}else{
				if (data.url && !data.isMemberAuth) {
					if (data.id == 'styleName' || data.id == 'organisation') {
						// const obj = {
						// 	styleId: this.grxxData.styleId || '',
						// 	organisationId: this.grxxData.organisationId || ''
						// };
						this.grxxData.organisationId = this.grxxData.organisationId || '';
						this.$pageTo(data.url + '?styleId=' + this.grxxData.styleId + '&organisationId=' + this.grxxData.organisationId);
						return;
					}
					if (data.id == 'intelligenceVoiceUrl') {
						this.$pageTo(data.url + '?cardId=' + this.grxxData.cardId);
						return;
					}
					this.$pageTo(data.url + '?type=' + data.type + '&id=' + data.id);
				} else if (!data.url && !data.isMemberAuth) {
					this.show = true;
				}
			}
		},
		// 关闭弹窗
		closeSheet() {
			this.show = false;
			this.imgShow = false;
		},
		// 性别选中数据
		selectSheet(data) {
			this.show = false;
			this.grxxData.genderName = data.name;
			this.grxxData.gender = data.gender;
			this.changeDetail();
		},
		changeDetail() {
			putCardUpdate({ ...this.grxxData }).then(res => {
				console.log(res.data);
			});
		},
		// 打开头像弹框
		imgOpen() {
			this.imgShow = true;
		},
		// 头像选中数据
		slectImg(data) {
			let type = data.value == 1 ? 'album' : 'camera';
			const that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: [type], //从相册选择
				success: function(res) {
					const file = res.tempFiles[0];
					file.url = file.path;
					fileUploadAnon(file).then(res => {
						if (res.data) {
							that.grxxData.imagePhoto = res.data.url;
							that.changeDetail();
						}
					});
					that.imgShow = false;
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
/* #ifdef MP-TOUTIAO */
::v-deep .u-line {
	display: none !important;
}
/* #endif */
.c-6B707C {
	color: #6b707c;
}
::v-deep .u-collapse-item__content__text {
	padding: 0;
}
::v-deep .u-cell--clickable {
	background-color: transparent !important;
}
::v-deep .u-cell__body {
	.u-cell__title-text {
		color: var(--titleFontColor);
		font-weight: 600;
	}
	padding: 20rpx 0;
}
.collapse-box {
	background-color: var(--viewBgColor);
	border-radius: 12rpx;
}
.cardmsg {
	min-height: 100vh;
	
/* #ifdef H5 */
	padding: 0 24rpx;
/* #endif */
	.nobottom {
		border-bottom: none !important;
	}
	.tips_box {
		padding: 40rpx 0;
		margin-bottom: 20rpx;
	}
	.single{margin: 0;}
	.con{
		margin: 0 20rpx;
		color: var(--contentFontDarkColor);
	}
	.single{margin: 0 !important;}
	.ellipsis2 {
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.ellipsis1 {
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.grxx_box {
		height: 100rpx;
		align-items: center;
		margin: 0 20rpx;
		background: #fff;
		border-bottom: 1px solid var(--viewDivisionColor);
		> view {
			margin: 0 20rpx;
			color: var(--contentFontDarkColor);
		}
		> text {
			color: var(--titleFontColor);
			white-space: nowrap;
		}
	}
	.img_min {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		float: right;
	}
	.img_right {
		font-size: 24rpx;
		color: var(--contentFontFourColor) !important;
	}
}
</style>
